{% extends "base.html" %}
{% block css %}
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html, body, #container {
            height: 100%;
            width: 100%;
        }

        .input-card .btn{
            margin-right: 1.2rem;
            width: 9rem;
        }

        .input-card .btn:last-child{
            margin-right: 0;
        }
    </style>
{% end %}
{% block container %}
         <div class="row">
          <div class="col-xs-12 col-sm-6 col-md-8">
              <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">实时运动地图</h3>
                  </div>
                  <div class="panel-body">
                    <div id="container" style="min-width:400px;min-height:500px"></div>
                  </div>
                </div>
          </div>
          <div class="col-xs-6 col-md-4">
              <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">实时画面</h3>
                  </div>
                  <div class="panel-body">
                    <img id="liveImg" src="" width="330" height="300">
                  </div>
              </div>
              <div class="panel panel-default">
                  <div class="panel-heading">
                    <h3 class="panel-title">提示信息</h3>
                  </div>
                  <div class="panel-body" style="min-height: 120px;margin: auto">
                      <div class="alert alert-success" role="alert">操作提示</div>
                  </div>
              </div>
          </div>
        </div>
        <div class="input-card" style="width: 140px;text-align:center">
                <h4>轨迹回放控制</h4>
                <div class="input-item" style="">
                    <input type="button" class="btn" value="开始自动巡检" id="start" onclick="getApi()"/>
                </div>
                <div class="input-item" >
                    <input type="button" class="btn" value="暂停巡检" id="resume" onclick="clearMarker()"/>
                </div>
            </div>
{% end %}


{% block script %}
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=您申请的key值"></script>
<script type="text/javascript">
    var marker, map = new AMap.Map("container", {
        resizeEnable: true,
        center: [121.563556,31.301765],
        zoom: 13
    });
    window.onload = function () {
          addMarker();
          getRaspinfoApi();
      }
      function getApi() {
        //设置时间 5-秒  1000-毫秒  这里设置你自己想要的时间
        setTimeout(getApi,5*1000);
        setTimeout(getRaspinfoApi,5*1000);
        $.ajax({
            url: 'http://{{url}}/gpsinfo',
            type: 'get',
            dataType: 'json',
            success: function (data) {
                //方法中传入的参数data为后台获取的数据
                console.log(data);
                jingdu = data['jingdu'];
                weidu = data['weidu'];
                updatedata = [jingdu,weidu];
                updateContent(updatedata);
            }
        })
    }

    // 实例化点标记
    function addMarker() {
        marker = new AMap.Marker({
            icon: "./static/images/car2.png",
            position: [121.563938,31.3021],
            offset: new AMap.Pixel(-13, -30)
        });
        marker.setMap(map);
    }

    function updateContent(data) {

        if (!marker) {
            return;
        }

        // // 自定义点标记内容
        // var markerContent = document.createElement("div");
        //
        // // 点标记中的图标
        // var markerImg = document.createElement("img");
        // markerImg.className = "markerlnglat";
        // markerImg.src = "https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-red.png";
        // markerContent.appendChild(markerImg);
        //
        // // 点标记中的文本
        // var markerSpan = document.createElement("span");
        // markerSpan.className = 'marker';
        // markerSpan.innerHTML = "Hi，我被更新啦！";
        // markerContent.appendChild(markerSpan);
        //
        // marker.setContent(markerContent); //更新点标记内容
        marker.setPosition(data); //更新点标记位置
    }

    // 清除 marker
    function clearMarker() {

        if (marker) {
            marker.setMap(null);
            marker = null;
        }
    }
</script>
<script type="text/javascript">
var img = document.getElementById("liveImg");
var arrayBuffer;

//使用WebSocket连接到服务器
var ws = new WebSocket("ws://{{url}}/camera"); ws.binaryType = 'arraybuffer';   //设置为要接收的数据是二进制

ws.onopen = function(){console.log("connection was established");};  //建立连接时调用
ws.onmessage = function(evt){
	arrayBuffer = evt.data;
        //解码接收的数据并使用base64进行编码
	img.src = "data:image/jpeg;base64," + encode(new Uint8Array(arrayBuffer));
};

window.onbeforeunload = function(){
    //当窗口（选项卡）关闭时，通知服务器会话结束
    ws.close(1000);
};

function encode (input) {
    var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
    var output = "";
    var chr1, chr2, chr3, enc1, enc2, enc3, enc4;
    var i = 0;

    while (i < input.length) {
        chr1 = input[i++];
        chr2 = i < input.length ? input[i++] : Number.NaN; // Not sure if the index
        chr3 = i < input.length ? input[i++] : Number.NaN; // checks are needed here

        enc1 = chr1 >> 2;
        enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
        enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
        enc4 = chr3 & 63;

        if (isNaN(chr2)) {
            enc3 = enc4 = 64;
        } else if (isNaN(chr3)) {
            enc4 = 64;
        }
        output += keyStr.charAt(enc1) + keyStr.charAt(enc2) +
                  keyStr.charAt(enc3) + keyStr.charAt(enc4);
    }
    return output;
}
</script>
{% end %}
